<template>
	<view :style="{'--color':color}">
		<u-popup :show="true" @close="close" mode="bottom" :round="10" closeable>
			<view class="Wrapper">
				<view class="head">选择收货地址</view>
				<view class="content">
					<view class="Wechat" @click="chooseAddress">
						<view class="d-flex a-center">
							<view class="iconfont icon-weixin color_wechat size44"></view>
							<text class="wechat_address">获取微信收货地址</text>
						</view>
						<view class="iconfont icon-xiangyouxiayiye color_99 h6"></view>
					</view>

					<view class="List" v-for="(item,index) in pageData" :key="item.id" @click="ToggleAddress(item.id)">
						<view class="List_icon" :class="{'Active':item.id == Address.id}">
							<text class="icon-xuanzhong iconfont size28"></text>
						</view>
						<view class="List_box">
							<text class="List_box_address">{{item.Aregion}}{{item.Aaddress}}</text>
							<view class="List_box_info">
								<view class="downtown_More" v-if="item.is_default == 1">默认</view>
								<text class="infoTxt">{{item.Aname}}</text>
								<text class="infoTxt">{{item.Amobile}}</text>
							</view>
						</view>
						<view class="iconfont icon-bianji color_99 size36" @click.stop="EditAddress(item)"></view>
					</view>

					<emptys empty="address" v-if="!pageData.length"></emptys>
				</view>
				<view class="footer">
					<view class="newCreat" @click="newAdd">新增地址</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		props: ['Address'],
		data() {
			return {
				pageData: [],
			}
		},
		created() {
			this.getAddress()
		},
		methods: {
			getAddress() {
				this.$showLoading('')
				this.$http.post({
					url: '/zzj_singleSaleApi/getAddress',
				}).then(res => {
					this.$hideLoading()
					if (res.code != '100') return this.$Toast(res.msg)
					const result = res.data || []
					this.pageData = result
				})
			},
			ToggleAddress(id) {
				this.$http.get({
					url: '/zzj_singleSaleApi/saveDefaultAddress',
					data: {
						id
					}
				}).then(res => {
					if (res.code != 100) return this.$Toast(res.msg)
					this.$emit('Update')
					this.close()
				})
			},
			EditAddress(item) {
				this.toUrl(`/orderPage/Addresslist/editAddress?id=${item.id}&bid=${item.bid}&type=2`)
				this.close()
			},
			async chooseAddress() {
				const addressResult = await this.$pop.chooseAddress();
				if (addressResult) this.getAddress();
			},
			newAdd() {
				this.toUrl(`/orderPage/Addresslist/editAddress?type=1`)
				this.close()
			},
			close() {
				this.$emit('close')
			}
		},
		watch: {
			Address: {
				immediate: true,
				handler(newVal) {
					if (newVal) this.getAddress()
				}
			},

		},
		computed: {
			...mapState(['color'])
		},

	}
</script>

<style lang="scss" scoped>
	@mixin Fleac {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.Wrapper {
		width: 100%;

		.head {
			width: 100%;
			display: flex;
			justify-content: center;
			padding: 30rpx 0 30rpx;
			color: #000;
			font-size: 34rpx;
		}

		.content {
			width: 100%;
			background-color: #f7f8fa;
			height: 800rpx;
			padding: 24rpx;
			overflow-y: scroll;

			.Wechat {
				width: 100%;
				height: 86rpx;
				background-color: #ffffff;
				border-radius: 10rpx;
				display: flex;
				padding: 0 24rpx;
				justify-content: space-between;
				align-items: center;

				.wechat_address {
					color: #343434;
					font-size: 28rpx;
					margin-left: 16rpx;
				}
			}

			.List {
				width: 100%;
				padding: 24rpx 0 24rpx 24rpx;
				background-color: #ffffff;
				margin-top: 24rpx;
				border-radius: 10rpx;
				display: flex;
				align-items: center;

				&_icon {
					width: 36rpx;
					height: 36rpx;
					border: 1px solid #ccc;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.Active {
					background-color: var(--color);
					border: 1px solid var(--color) !important;
				}

				&_box {
					flex: 1;
					display: flex;
					flex-direction: column;
					padding: 0 10rpx 0 24rpx;

					&_address {
						color: #000;
						font-size: 30rpx;
					}

					&_info {
						display: flex;
						align-items: center;
						margin-top: 16rpx;

						.downtown_More {
							background-color: var(--color);
							color: #ffffff;
							font-size: 20rpx;
							padding: 0 10rpx;
							border-radius: 20rpx;
							margin-right: 10rpx;
						}

						.infoTxt {
							color: #999;
							font-size: 28rpx;
							margin-right: 10rpx;
						}
					}
				}

				.icon-bianji {
					padding: 24rpx;
				}
			}
		}

		.footer {
			width: 100%;
			height: 100rpx;
			@include Fleac;

			.newCreat {
				@include Fleac;
				width: 600rpx;
				height: 70rpx;
				background-color: var(--color);
				border-radius: 35rpx;
				color: #ffffff;
				font-size: 32rpx;
			}
		}
	}
</style>